<!DOCTYPE html>
<!--
This is a starter template page. Use this page to start your new project from
scratch. This page gets rid of all links and provides the needed markup only.
-->
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="referrer" content="never">
    <title>@yield('title') - 后台管理系统</title>
    <!-- Tell the browser to be responsive to screen width -->
    <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
    <meta name="_token" content="{{ csrf_token() }}"/>
    <link href="/static/css/common.css" rel="stylesheet">

    <link rel="stylesheet" type="text/css" href="/static/css/webstyle.css">

    <link rel="stylesheet" href="/static/css/backend/base.css?v=1">

    <link rel="stylesheet" href="/static/libs/font-awesome/4.5.0/css/font-awesome.min.css">

    <script type="text/javascript">

        if(navigator.appName == 'Microsoft Internet Explorer'){
            if(navigator.userAgent.indexOf("MSIE 5.0")>0 ||
                navigator.userAgent.indexOf("MSIE 6.0")>0 ||
                navigator.userAgent.indexOf("MSIE 7.0")>0)
            {
                alert('您使用的 IE 浏览器版本过低, 推荐使用 Chrome 浏览器或 IE8 及以上版本浏览器.');
            }
        }
    </script>
    <script src="/static/libs/jquery-2.2.3.min.js"></script>
    <script type="text/javascript" src="/static/js/general.js?v=1"></script>
    <script src="/static/libs/vue.min.js"></script>
    <script src="/static/libs/vue-resource.js"></script>
    <link href="/static/libs/element-ui/2.15.7/index.css" rel="stylesheet">
    <script src="/static/libs/element-ui/2.15.7/index.js"></script>
    <style>
        body{
            margin: 0;
            padding: 0;
            font-size: 12px;
        }
        .clearfix {
            *zoom: 1;
        }
        .clearfix:before,
        .clearfix:after {
            display: table;
            content: "";
            line-height: 0;
        }
        .clearfix:after {
            clear: both;
        }
        .el-form--label-top .el-form-item__label{
            padding: 0px;
        }
        .design-layout-top {
            position: relative;
            left: 0px;
            top: 0px;
            right: 0px;
            width: 100%;
            height: 60px;
            background: rgba(255, 255, 255, 1);
            box-shadow: 2px 0px 8px 0px rgba(188, 195, 206, 1);
            z-index: 3;
        }
        .header {
            height: 60px;
        }
        .design-layout-main{
            position: relative;
            z-index: 1;
            display: flex;
        }
        .design-layout-left{
            /*float: left;*/
            width: 220px;
            background: rgba(255, 255, 255, 1);
            min-height: 100vh;
            padding-left: 10px;
            padding-right: 10px;
        }
        .design-layout-left-title{
            font-size: 16px;
            padding-top: 20px;
            padding-bottom: 10px;
            color: #3f4245;
        }
        .design-layout-left-block{

        }
        .design-layout-left-block-item{
            border: 1px solid #DCDFE6;
            border-radius: 4px;
            height: 36px;
            line-height: 36px;
            font-size: 14px;
            padding-left: 10px;
            display: flex;
            margin-bottom: 10px;
            cursor: pointer;
        }
        .design-layout-left-block .active,.design-layout-left-block-item:hover{
            color: #409EFF;
            background: #ecf5ff;
            border-color: #b3d8ff
        }
        .design-layout-left-block-item-icon{

        }
        .design-layout-left-block-item-text{
            padding-left: 10px;
            width: 120px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }
        .design-layout-center{
            width: 620px;
            margin: 5vh auto;
            min-height: 90vh;
            overflow: hidden;
            position: relative;
        }
        .design-layout-center-h5{
            width: 500px;
            margin: 5vh auto;
            min-height: 90vh;
            overflow: hidden;
            position: relative;
        }
        .design-layout-center-select-area{
            border: 2px dashed #409EFF;
            background: rgba(41,186,156,0.100);
            position: absolute;
            z-index: 9;
        }
        .design-layout-center-right{
            width: 320px;
            background: #fff;
            padding: 30px 20px 0 20px;
        }
    </style>
</head>

<body>
<div class="wrapper">
    <div class="all" style="padding: 0px;">
        <div id="app" v-cloak>
            <div class="design-layout-top">
                <el-row type="flex" justify="space-between" align="middle" class="header">
                    <!-- 页面标题 -->
                    <el-col :span="13" class="middle"></el-col>

                    <el-col :span="5" class="middle">
                        <div style="display: flex">
                            <span style="font-size: 15px;font-weight: bold;line-height: 35px;color: #409EFF">当前页面： </span>
                            <el-select v-model="page_id" @change="changePage" placeholder="请选择页面">
                                <el-option
                                        v-for="item in page_list"
                                        :key="item.id"
                                        :label="item.name"
                                        :value="item.id">
                                </el-option>
                            </el-select>
                        </div>
                        <div>
                            <!--<span class="scene-head-tips" @click="jumpUrl">图片智能在线设计<i @click.stop="showTip" class="iconfont icon-wenhao" style="margin-left:6px;"></i> </span>-->
                        </div>
                    </el-col>


                    <!-- 右侧功能区域 -->
                    <el-col :span="6" class="right">
                        <el-button class="save" @click="handle_page_release">返回列表</el-button>
                        <el-button type="primary" class="release" @click="savePreview">预览</el-button>
                        <el-button type="primary" class="release" @click="savePage">保存</el-button>
                    </el-col>
                </el-row>
            </div>
            <div class="design-layout-main clearfix">
                <div class="design-layout-left">
                    <div class="design-layout-left-title">
                        <i class="el-icon-caret-bottom"></i>
                        模块内容
                    </div>
                    <div class="design-layout-left-block">
                        <div v-for="(item,index) in page_configs" class="design-layout-left-block-item"
                             :class="{ active: curr_block==index}"
                             @click="showConfigs(index,item)">
                            <div class="design-layout-left-block-item-icon">
                                <i class="fa fa-bars" aria-hidden="true"></i>
                            </div>
                            <div class="design-layout-left-block-item-text" :title="item.title">
                                [[item.title]]
                            </div>
                        </div>
                    </div>
                </div>
                <div v-if="theme_type==2" id="preview_iframe_con" class="design-layout-center-h5">
                    <div v-if="curr_rect.width"
                         class="design-layout-center-select-area"
                         :style="{ left: curr_rect.left*2 + 'px', top: curr_rect.top*2 + 'px',width:curr_rect.width*2 + 'px',height:curr_rect.height*2 + 'px' }"
                    ></div>
                    <iframe  :src="preview_url" id="preview_iframe"
                            frameborder="0"
                            style="width: 500px; height: 90vh; margin:0 auto;background: #fff;"
                    ></iframe>
                </div>
                <div v-else  id="preview_iframe_con" class="design-layout-center">
                    <div v-if="curr_rect.width"
                         class="design-layout-center-select-area"
                         :style="{ left: curr_rect.left + 'px', top: curr_rect.top + 'px',width:curr_rect.width + 'px',height:curr_rect.height + 'px' }"
                    ></div>
                    <iframe :src="preview_url" id="preview_iframe"
                            frameborder="0"
                        style="width: 1250px; height: 180vh; margin:0 auto;transform: scale(0.5); transform-origin: 0px 0px;background: #fff;"
                    ></iframe>
                </div>
                <div class="design-layout-center-right">
                    <div class="design-layout-center-right-item">
                        <el-form ref="form" :model="form" :rules="rules" label-width="15%" label-position="top">
                            <el-form-item v-for="(item,index) in curr_configs" :key="index" :label="item.title" prop="index">
                                <template v-if="item.type=='textarea'">
                                    <el-input v-model="page_configs[curr_block]['configs'][index]['value']"
                                              :rows="5" type="textarea"
                                    ></el-input>
                                </template>
                                <template v-else-if="item.type=='richtext'">
                                    <tinymceee v-model="page_configs[curr_block]['configs'][index]['value']"></tinymceee>
                                </template>
                                <template v-else-if="item.type=='image'">
                                    <div class="upload-box" @click="openUpload(index)" v-if="!page_configs[curr_block]['configs'][index]['value']">
                                        <i class="el-icon-plus" style="font-size:32px"></i>
                                    </div>
                                    <div @click="openUpload(index)" class="upload-boxed" v-if="page_configs[curr_block]['configs'][index]['value']">
                                        <img :src="page_configs[curr_block]['configs'][index]['value']" alt="" style="width:150px;height:150px;border-radius: 5px;cursor: pointer;">
                                        <div class="upload-boxed-text">点击重新上传</div>
                                    </div>
                                </template>
                                <template v-else-if="item.type=='data'">
                                    <div class="" v-if="page_configs[curr_block]['configs'][index]['value']">
                                        <el-table
                                                :data="page_configs[curr_block]['configs'][index].datas"
                                                style="width: 100%;overflow:auto">
                                            <el-table-column v-for="(field,fieldIndex) in page_configs[curr_block]['configs'][index].dataSource.showFields"
                                                             :key="fieldIndex"
                                                             :label="field.title"
                                                             :prop="field.field"
                                                             align="center"
                                                             :width="field.width?field.width+'px':''"></el-table-column>
                                        </el-table>

                                    </div>
                                    <div v-if="!page_configs[curr_block]['configs'][index]['value']">
                                        <el-button type="primary" @click="openSearch(index)" style="width: 100%;">添加</el-button>
                                    </div>
                                    <div v-if="page_configs[curr_block]['configs'][index]['value']">
                                        <el-button type="primary" @click="openSearch(index)" style="width: 100%;">重新添加</el-button>
                                    </div>
                                </template>
                                <template v-else-if="item.type=='dataList'">
                                    <div class="" v-if="page_configs[curr_block]['configs'][index]['value']">
                                        <el-table
                                                :data="page_configs[curr_block]['configs'][index].datas"
                                                style="width: 100%;overflow:auto">
                                            <el-table-column v-for="(field,fieldIndex) in page_configs[curr_block]['configs'][index].dataSource.showFields"
                                                             :key="fieldIndex"
                                                             :label="field.title"
                                                             :prop="field.field"
                                                             align="center"
                                                             :width="field.width?field.width+'px':''"></el-table-column>
                                        </el-table>
                                    </div>
                                    <div >
                                        <el-button type="primary" @click="openSearch(index)" style="width: 100%;">添加</el-button>
                                    </div>
                                </template>
                                <template v-else>
                                    <el-input v-model="page_configs[curr_block]['configs'][index]['value']"></el-input>
                                </template>
                            </el-form-item>
                        </el-form>
                        <div class="design-layout-center-right-item-title">

                        </div>
                    </div>
                </div>
            </div>
            <upload-img :upload-show="uploadShow" :name="chooseImgName" @replace="changeProp" @sure="sureImg"></upload-img>

            <el-dialog :title="curr_search_config.searchTitle" :visible.sync="search_show" width="60%">
                <div>
                    <template v-for="(item,index) in curr_search_config.search">
                    <el-input v-if="item.type=='text'" v-model="curr_search_config['showFields'][index].value" style="width:60%;" :placeholder="item.placeholder"></el-input>
                    </template>
                    <el-button @click="getSearchData" >搜索</el-button>
                </div>
                <template v-if="curr_configs[curr_search_name] && curr_configs[curr_search_name].type=='data'">
                    <el-table

                            :data="search_list"
                            style="width: 100%;height:500px;overflow:auto"
                            v-loading="search_loading"
                            @row-click = "showRow">
                        <el-table-column label="选择" width="50" align="center">
                            <template slot-scope="scope">
                                <el-radio class="radio" v-model="search_radio"  :label="scope.row.id"> </el-radio>
                            </template>
                        </el-table-column>
                        <el-table-column v-for="(item,index) in curr_search_config.showSearchFields"
                                         :key="index"
                                         :label="item.title"
                                         :prop="item.field"
                                         align="center"
                                         :width="item.width?item.width+'px':''"></el-table-column>
                    </el-table>
                </template>
                <template v-else-if="curr_configs[curr_search_name] && curr_configs[curr_search_name].type=='dataList'">
                    <el-table
                            :data="search_list"
                            style="width: 100%;height:500px;overflow:auto"
                            v-loading="search_loading"
                            @selection-change="searchChange">
                        <el-table-column
                                type="selection"
                                width="55">
                        </el-table-column>
                        <el-table-column v-for="(item,index) in curr_search_config.showSearchFields"
                                         :key="index"
                                         :label="item.title"
                                         :prop="item.field"
                                         align="center"
                                         :width="item.width?item.width+'px':''"></el-table-column>

                    </el-table>
                </template>

                <el-row v-if="curr_search_config.showPage">
                    <el-col align="right">
                        <el-pagination layout="prev, pager, next,jumper" @current-change="getSearchData" :total="search_total"
                                       :page-size="search_per_page" :current-page="search_current_page" background
                        ></el-pagination>
                    </el-col>
                </el-row>
                <span slot="footer" class="dialog-footer">

                    <el-button @click="search_show = false">取 消</el-button>
                    <el-button type="primary" @click="chooseSearch()">确 定</el-button>
                </span>

            </el-dialog>
        </div>
    </div>
</div>
<script src="/static/libs/tinymce4.7.5/tinymce.min.js"></script>
@include('backend.public.tinymceee')
@include('backend.public.uploadImg')
<script>
    var app = new Vue({
        el: "#app",
        delimiters: ['[[', ']]'],
        name: 'design',
        data() {
            return {
                page_id: "",
                theme_id:"",
                page_list:[],
                page_configs:{},
                page_info:{},
                form:{
                    name:''
                },
                theme_type:1,
                rules:{},
                curr_block:'',
                curr_configs:{},
                curr_rect:{
                   left:0,
                   top:0,
                   width:0,
                   height:0
                },
                preview_url:'',
                uploadShow:false,
                chooseImgName:'',
                search_show:false,
                curr_search_name:'',
                curr_search_config:{},
                search_list:[],
                search_current_page:1,
                search_total:1,
                search_per_page:1,
                search_loading:false,
                search_loading1:false,
                search_radio: '',
                search_item:{},
                search_item_list:[]
            }
        },
        mounted() {
            this.page_id = parseInt(getParam("page_id"));
            this.theme_id = getParam("theme_id");
            this.preview_url = `{!! absolute_admin_url('theme.theme.preview') !!}`+`&page_id=`+this.page_id+'&type=1'+'&time='+`{{time()}}`;
            this.getPageList();
            this.getData();

            let ifr = document.getElementById('preview_iframe');
            const deviceHeight = document.getElementById('preview_iframe').clientHeight;
            ifr.style.height = (Number(deviceHeight*2)) + 'px';
            document.getElementById('preview_iframe_con').style.height = (Number(deviceHeight)) + 'px';
            console.log('deviceHeight',deviceHeight)
        },
        methods:{
            changePage(){
                let link = `{!! absolute_admin_url('theme.theme.pageDetail') !!}`+`&theme_id=`+this.theme_id+`&page_id=`+this.page_id;
                window.location.href = link;
            },
            getPageList() {
                let params = {};
                params['theme_id'] = this.theme_id;
                this.$http.post('{!! absolute_admin_url('theme.theme.getPageList') !!}',params).then(function(response) {
                    if (response.data.result) {
                        this.page_list = response.data.data;
                        if(!this.page_id && this.page_list){
                            let pageListLength = this.page_list.length;
                            for(let i=0;i<pageListLength;i++){
                                if(this.page_list[i]['type']=='index'){
                                    this.page_id = this.page_list[i]['id'];
                                    this.preview_url = `{!! absolute_admin_url('theme.theme.preview') !!}`+`&page_id=`+this.page_id;
                                    break;
                                }
                            }
                        }
                    } else {
                        this.$message({
                            message: response.data.msg,
                            type: 'error'
                        });
                    }
                }, function(response) {
                    this.$message({
                        message: response.data.msg,
                        type: 'error'
                    });
                });
            },
            getData() {
                let json = {};
                json['theme_id'] = this.theme_id;
                json['page_id'] = this.page_id;
                let loading = this.$loading({target:document.querySelector(".content"),background: 'rgba(0, 0, 0, 0)'});
                this.$http.post('{!! absolute_admin_url('theme.theme.getPageDetail') !!}',json).then(function (response) {
                        if (response.data.result){
                            this.page_configs = response.data.data.configs;
                            this.page_info = response.data.data.page_info;
                            this.theme_type = response.data.data.theme_type;
                        } else {
                            this.$message({message: response.data.msg,type: 'error'});
                        }
                        loading.close();
                    },function (response) {
                        this.$message({message: response.data.msg,type: 'error'});
                        loading.close();
                    }
                );
            },
            showConfigs(key,item){
                this.curr_block = key;
                this.curr_configs = item.configs;
                this.calRect(item.id);

            },
            calRect(id){
                let idDom = document.getElementById('preview_iframe').contentWindow.document.getElementById(id);
                if(idDom){
                    let rect = idDom.getBoundingClientRect();
                    this.curr_rect.width = rect.width*0.5 || 0
                    this.curr_rect.height = rect.height*0.5 || 0
                    this.curr_rect.left = rect.left*0.5-1 || 0
                    this.curr_rect.top = rect.top*0.5-1 || 0
                }
            },
            openUpload(str) {
                this.chooseImgName = str;
                this.uploadShow = true;
            },
            changeProp(val) {
                if(val == true) {
                    this.uploadShow = false;
                }
                else {
                    this.uploadShow = true;
                }
            },
            sureImg(name,image,image_url) {
                console.log()
                this.page_configs[this.curr_block]['configs'][name]['value'] = image_url;
            },
            clearImg(str) {
                this.page_configs[this.curr_block]['configs'][str]['value'] = "";
                this.$forceUpdate();
            },
            openSearch(key){
                this.search_list = [];
                this.search_show = true;
                this.curr_search_name = key;
                this.curr_search_config = this.curr_configs[key]['dataSource'];
                if(this.curr_search_config['autoload']){
                    this.getSearchData();
                }
            },
            getSearchData(){
                let url ='/admin/index?route=' + this.curr_search_config['api'];
                let search = {};
                for (key in this.curr_search_config['showFields']){
                    search[this.curr_search_config['showFields'][key]['field']] = this.curr_search_config['showFields'][key]['value']
                }
                let params = {};
                if(this.curr_search_config['showParamsKey']){
                    params[this.curr_search_config['showParamsKey']] = search;
                }else{
                    params = search;
                }
                this.$http.post(url,params).then(response => {
                    if (response.data.result) {
                        if(this.curr_search_config['showPage']){
                            this.search_list = response.data.data.data;
                            this.search_current_page=response.data.data.current_page;
                            this.search_total=response.data.data.total;
                            this.search_per_page=response.data.data.per_page;
                        }else{
                            this.search_list=response.data.data
                        }

                    }else{
                        this.$message({type: 'error',message: response.data.msg});
                    }
                }, response => {
                    this.$message({type: 'error',message: response.data.msg});
                    console.log(response);
                });
            },
            searchChange(val){
                this.search_item_list = val;
                console.log('this.multipleSelection',this.search_list)
            },
            showRow(row){
                this.search_radio = row.id;
                this.search_item=row;
                console.log('----this.search_radio---',this.search_radio)
                console.log('----row---',row)
            },
            savePreview() {
                let that = this;
                let json = {};
                json['page_id'] = this.page_id;
                json['configs'] = this.page_configs;
                let loading = this.$loading({target:document.querySelector(".content"),background: 'rgba(0, 0, 0, 0)'});
                this.$http.post('{!! absolute_admin_url('theme.theme.savePreview') !!}',json).then(response => {
                    if (response.data.result) {

                        let a = document.createElement("a");
                        let aId = 'previewBtn';
                        a.setAttribute("href", '{!! absolute_admin_url('theme.theme.preview') !!}'+'&page_id='+this.page_id+'&type=0');
                        a.setAttribute("target", "_blank");
                        a.setAttribute("id", aId);
                        // 防止反复添加
                        if(!document.getElementById(aId)) {
                            document.body.appendChild(a);
                        }
                        a.click();
                    } else {
                        this.$message({message: response.data.msg,type: 'error'});
                    }
                    loading.close();
                },response => {
                    loading.close();
                });

            },
            savePage() {
                let that = this;
                let json = {};
                json['page_id'] = this.page_id;
                json['configs'] = this.page_configs;
                let loading = this.$loading({target:document.querySelector(".content"),background: 'rgba(0, 0, 0, 0)'});
                this.$http.post('{!! absolute_admin_url('theme.theme.savePage') !!}',json).then(response => {
                    if (response.data.result) {
                        this.$message({type: 'success',message: '保存成功!'});
                        window.location.reload();
                    } else {
                        this.$message({message: response.data.msg,type: 'error'});
                    }
                    loading.close();
                },response => {
                    loading.close();
                });

            },
            chooseSearch(){
                if(this.curr_configs[this.curr_search_name].type=='data'){
                    this.page_configs[this.curr_block]['configs'][this.curr_search_name]['value'] = this.search_radio;
                    this.page_configs[this.curr_block]['configs'][this.curr_search_name]['datas'] = [this.search_item];
                }else if(this.curr_configs[this.curr_search_name].type=='dataList'){
                    this.page_configs[this.curr_block]['configs'][this.curr_search_name]['datas'] = this.search_item_list;
                    let values = [];
                    for (k in this.search_item_list){
                        values.push(this.search_item_list[k]['id']);
                    }
                    this.page_configs[this.curr_block]['configs'][this.curr_search_name]['value'] = [];
                }
                console.log('this.curr_configs.type',this.curr_configs)
                this.search_show = false;
            },
            handle_page_release(){
                let link = `{!! absolute_admin_url('theme.theme.index') !!}`;
                window.location.href = link;
            },
            handle_page_save() {
            }
        }
    })
</script>

</body>
</html>
